import React, { useState, useEffect } from 'react';
import { TeamOutline, UserOutline } from 'antd-mobile-icons';
import { Tabs, Badge } from 'antd-mobile';
import './Home.scss';
import { useSearchParams, useNavigate } from "react-router-dom";
// 
import HomeSeahd from '../../components/HomeSeahd/HomeSeahd';
import ModuleBanner from '../../components/modules/ModuleBanner/ModuleBanner'
import ModuleListRow from '../../components/modules/ModuleListRow/ModuleListRow'
import ModuleListColumn from '../../components/modules/ModuleListColumn/ModuleListColumn'
import ModuleShortCut from '../../components/modules/ModuleShortCut/ModuleShortCut'
import ModuleMainList from '../../components/modules/ModuleMainList/ModuleMainList'
export default function Home() {
   let navigate = useNavigate();
   // 首页 搜索 推荐  数据 
   const [seaswiper, setSeaswiper] = useState([]);
   const [seastate, setState] = useState(false);
   // item
   let [navi, setNavi] = useState([]);
   let [activeKey, setActiveKey] = useState("");
   let [modules, setModules] = useState([]);
   // 男  女
   let [searchParams, setSearchParams] = useSearchParams();
   let gender = searchParams.get("gender") || "1";
   // const [sex, setSex] = useState('男')
   // 搜索 swiper
   useEffect(() => {
      React.axios('search/getHotWords').then(res => {
         setSeaswiper(res.list)
         // console.log('res', res.list);
      })
   }, []);
   // 小说  
   useEffect(() => {
      console.log("gender", gender);
      React.axios
         .get("store/navi.json", {
            params: { gender },
         })
         .then(function (res) {
            console.log('-----', res.navi, res.navi[0].url);
            setNavi(res.navi);
            setActiveKey(res.navi[0].url);
            setState(true)
         })
         .catch(function (error) {
            console.log(error);
         });
   }, [gender]);
   // 首页数据 activeKey
   useEffect(() => {
      // setTimeout(() => {
      seastate && React.axios
         .get(activeKey)
         .then(function (res) {
            console.log('首页数据---->', res.list);
            setModules(res.list);
         })
         .catch(function (error) {
            console.log(error);
         });
      // });
   }, [activeKey, seastate]);


   return modules && <div className="home_box">
      {/* 头部 */}
      <div className="head">
         <div className='hd_gender'>
            {gender == 1 ? (
               <span className='gen_sex' onClick={(gender) => navigate("/?gender=2")}>
                  <TeamOutline fontSize={26} /></span>
            ) : (
               <span className='gen_sex' onClick={(gender) => navigate("/?gender=1")}>
                  <UserOutline fontSize={26} /></span>
            )}
         </div>
         <div className="hd_right">
            <HomeSeahd pic={seaswiper}></HomeSeahd>
         </div>
      </div>
      {/* 列表项 */}
      <div className="nav_list">
         <Tabs
            style={{
               "--title-font-size": "14px"
            }}
            activeKey={activeKey}
            onChange={(key) => setActiveKey(key)}
         >
            {/* .filter((o) => o.style !== 1)  过滤 */}
            {navi.map((o) => (
               <Tabs.Tab
                  style={{
                     "padding": "6px 0"
                  }} title={o.name} key={o.url} />
            ))}
         </Tabs>
      </div>
      {/* modules   模块 轮播图10 49 52 36 34 58  51 52 46 */}
      <div className="modules">
         {modules && modules.map((m) => {
            // return <p>{m.module}</p>
            let element;
            switch (m.module) {
               case 10:
                  element = <ModuleBanner key={Math.random()} data={m} />;
                  break;
               case 49:
                  element = <ModuleShortCut key={Math.random()} data={m} />;
                  break;
               case 52:
                  element = <ModuleMainList key={Math.random()} data={m} />;
                  break;
               case 36:
                  element = <ModuleListColumn key={Math.random()} data={m} />;
                  break;
               case 34:
                  element = <ModuleListRow key={Math.random()} data={m} />;
                  break;

               default:
                  //  element = <p key={Math.random()}>{m.module}</p>;
                  break;
            }
            return element;
         })}
      </div>
      {/*  */}
      <div className="footer">
         我是有底线的≧▽≦
      </div>
   </div>
}